<template>
  <div class="user-container">
    <el-dropdown v-if="isLoggedIn" class="user-dropdown" trigger="click" size="medium">
      <div class="user-info">
        <div class="user-avatar">
          <img :src="user.avatar" alt="User Avatar">
        </div>
        <div>
          <span class="user-name">{{ hiddenName }}</span>
          <i class="el-icon-caret-bottom" />
        </div>
      </div>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="goToProfile">
          我的资料
        </el-dropdown-item>
        <el-dropdown-item @click.native="handleLogout">
          注销
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <div v-else class="login-container" @click="handleLogin">
      <svg-icon icon-class="user" class="login-icon" />
    </div>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import settings from '@/settings'

export default {
  name: 'HeaderUser',

  computed: {
    ...mapGetters(['permission_routes']),

    isLoggedIn() {
      return this.user && this.user.id
    },

    user() {
      return sa.$sys.getCurUser()
    },

    hiddenName() {
      return this.getHiddenName(this.user.name)
    }
  },

  methods: {
    handleLogin() {
      this.$router.push({
        path: settings.login_url
      })
    },

    handleLogout() {
      sa.confirm('退出登录!', () => {
        sa.$sys.removeToken()
        sa.$sys.removeCurUser()
        sa.f5()
      })
    },

    goToProfile() {
      this.$router.replace({
        path: settings.my_index
      })
    },

    getHiddenName(name) {
      if (name) {
        if (name.length <= 4) return name
        return `${name.slice(0, 2)}***${name.slice(-2)}`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.user-container {
  @include flex-center;
  height: 100%;
}

@keyframes borderAnimation {
  0% {
    background: linear-gradient(45deg, #409eff, #67c23a);
  }

  50% {
    background: linear-gradient(45deg, #67c23a, #e6a23c);
  }

  100% {
    background: linear-gradient(45deg, #e6a23c, #409eff);
  }
}

.user-dropdown {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  border-radius: 12px;
  position: relative;
 width: 100%;

  &::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 12px;
    background: transparent;
    z-index: 0;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  &:hover {
    background:  linear-gradient(to right, rgba(199, 224, 255, 0.05), rgba(72, 151, 248, 0.1));

    &::before {
      animation: borderAnimation 2s infinite;
    }

    .el-icon-caret-bottom {
      color: #409eff;
      transform: scale(1.1);
    }
  }
}

.user-info {
  @include flex-around;
  width: 100%;
}

.user-avatar {
  margin-right: 30px;

  img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
  }
}

.user-name {
  margin-right: 6px;
  color: #333;
}

.login-container {
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    .login-icon {
      transform: scale(1.1);
      color: #409eff;
    }
  }
}

.login-icon {
  font-size: 24px;
  color: #666;
}

.el-dropdown-menu {
  min-width: 140px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid #ebeef5;
  padding: 6px 0;
  transition: all 0.2s ease;

  &__item {
    font-size: 14px;
    padding: 8px 16px;
    color: #606266;
    transition: all 0.2s ease;
    position: relative;
    text-align: center;

    &:hover {
      color: #409eff;
      background: rgba(64, 158, 255, 0.06);

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: #409eff;
        border-radius: 0 2px 2px 0;
      }
    }
  }

  .el-dropdown-menu__item--divided {
    position: relative;
    margin-top: 6px;
    padding-top: 6px;

    &::before {
      content: '';
      position: absolute;
      left: 16px;
      right: 16px;
      top: 0;
      height: 1px;
      background: #ebeef5;
    }
  }
}

@media (max-width: 768px) {
  .user-dropdown {
    padding: 0 8px;
  }

  .user-avatar {
    width: 30px;
    height: 30px;
  }

  .el-dropdown-menu {
    min-width: 120px;
  }
}
</style>
